<template>
    <div style="background-color:white;">
            <div class="title">热销推荐</div>
    <ul style="background-color:white;">
      
      <router-link  
        tag="li"
        class="item" 
        v-for="item of recommendlist" 
        :key="item.id"
        :to="'/detail/'+item.id"
      >
        <img class="item-img" :src="item.imgUrl" />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
    </div>
</template>
<script>
export default {
     name: 'HomeRecommend',
     props :{
         recommendlist : Array
     },
      data() {
          return {
    //           RecommendList:[{
    //     id:'001',
    //     imgUrl:'http://img1.qunarzz.com/sight/p0/1504/47/4730a0c01664b63d.water.jpg_200x200_d7f52253.jpg',
    //     desc:'木兰天池浪漫主题乐园，浪漫开年活动火热进行中',
    //     title:'木兰天池浪漫胜地'
    // },
    // {
    //     id:'002',
    //     imgUrl:'http://img1.qunarzz.com/sight/p0/1805/f9/f9fa2c4b30dc9f5aa3.img.jpg_200x200_165f7560.jpg',
    //     desc:'武汉海昌极地海洋公园欢乐夏天',
    //     title:'武汉海昌极地海洋公园'
    // },
    // {
    //     id:'003',
    //     imgUrl:'http://img1.qunarzz.com/sight/p0/1412/3f/f4d858b40070a2232c1f2ffb74d5e2aa.water.jpg_200x200_be41969c.jpg',
    //     desc:'锦里沟万千花海',
    //     title:'锦里沟'
    // }, 
    // {
    //     id:'004',
    //     imgUrl:'http://img1.qunarzz.com/sight/p0/1501/bf/bf53a52a9e1c9905.water.jpg_200x200_01729033.jpg',
    //     desc:'东湖海洋世界奇幻之旅',
    //     title:'东湖海洋世界'
    // }]
          }
      }
    
  
}

</script>

<style lang="stylus" scoped>
    ul,li,body{
        margin 0
        padding 0
    }
  .title
    line-height: 3rem
    background: #eee
    text-indent: .5rem
    background-color white
    font-weight bold
    font-size 16px

  .item
    overflow: hidden
    display: flex
    height: 6rem
    .item-img
      width: 5rem
      height: 5rem
      padding: .5rem
    .item-info
      flex: 1
      padding: .5rem
      min-width: 0
      .item-title
        line-height: .9rem
        font-size: .9rem
        color: #444
      .item-desc
        line-height: .4rem
        font-size: .6rem
        color: #ccc
        ellipsis()
      .item-button
        line-height: 1.2rem
        font-size: .5rem
        margin-top: .1rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        color: #fff
        border: none 

</style>
